<template>
  <div class="app-container">
    <!--        <el-card :body-style="{ padding: '0px' }">-->
    <!--          <template #header>-->
    <!--            <div class="card-header">-->
    <!--              <span>库存预警</span>-->
    <!--              <el-button class="button" type="text">新增预警</el-button>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--          <el-alert-->
    <!--            title="库存预警"-->
    <!--            type="warning"-->
    <!--            description="文字说明文字说明文字说明文字说明文字说明文字说明"-->
    <!--            show-icon-->
    <!--          />-->
    <!--        </el-card>-->
    <div class="cards item" style="margin-left: 50px;width: 500px;height: 500px;margin-right: 100px;">
      <el-card class="box-card" style="margin-bottom: 20px;">
        <template #header>
          <div class="card-header">
            <span>今日出货量TOP5</span>
          </div>
        </template>
        <div v-for="(item, index) in top5List" :key="index" class="text item" style="margin-bottom: 10px">
          <span>TOP {{ index + 1 }} </span>
          品名: {{ item.title }}, 数量: {{ item.sum }} 件
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <div>
          <p>本仓库位于：华南农业大学</p>
          <p>地址：广东省广州市天河区五山路华南农业大学</p>
          <p>仓库经理为：梁声娴</p>
        </div>
      </el-card>
    </div>
    <emp-type-count class="item" />
    <product-in-and-out-count class="item" style="margin-left: 50px;margin-right: 100px;" />
    <today-out-by-category class="item" />
  </div>
</template>

<script>
import EmpTypeCount from '@/components/PieGraph/EmpTypeCount'
import ProductInAndOutCount from '@/components/BarGraph/ProductInAndOutCount'
import TodayOutByCategory from '@/components/BarGraph/TodayOutByCategory'
import { getTop5List } from '@/api/product'

export default {
  name: 'RepositoryData',
  components: { EmpTypeCount, ProductInAndOutCount, TodayOutByCategory },
  data() {
    return {
      top5List: [
        {
          sum: '',
          title: ''
        }
      ]
    }
  },
  mounted() {
    this.getTop5List()
  },
  methods: {
    getTop5List() {
      getTop5List().then(response => {
        const { content } = response
        this.top5List = content
      })
    }
  }
}
</script>
<style scoped>
.button {
  padding: 0;
  float: right;
}
.app-container {
  width: 1200px;
  display: flex;
  direction: ltr;
  flex-wrap: wrap;
}
.item {
  /*margin-right: 50px;*/
}
</style>

